<template>
  <div class="approvePageRoot" v-show="visible">
    <op-back-header @buttonClick="pageAction" title="Approve" />
    <div class="approvePage">
      <div class="approveForm">
        <op-card class="approveFormItem">
          <op-title title="Information" />
          <!-- 信息展示 -->
          <op-form
            class="opFormStyle"
            v-bind="{ ...formConfig }"
            :key="visible"
            :formData="formData"
            @formEvent="formEvent"
          ></op-form>
          <!-- 文件展示 -->
          <div v-if="!noneAttachment">
            <div class="chartTitle">
              <span>
                Attachment
                <span v-if="fileList?.length > 0" style="color: #127bbc">
                  {{ `(Total：${fileList?.length})` }}
                </span>
              </span>
            </div>
            <my-file-list v-if="fileList?.[0]?.link" v-model="fileList" @itemEvent="fileEvent" />
            <div v-else class="noData">No Data</div>
          </div>
        </op-card>
        <!-- 审批交互 -->
        <op-card class="approveFormRemark">
          <op-title title="Remark" />
          <div class="textarea">
            <op-input
              v-model="remarkValue"
              type="textarea"
              resize="none"
              :disabled="disabled"
              style="height: 100%"
              :maxlength="500"
              show-word-limit
            ></op-input>
            <op-button-list
              :button-list="dialogButtonList"
              @buttonClick="buttonClick"
            ></op-button-list>
          </div>
        </op-card>
      </div>
      <!-- 审批流程展示 -->
      <op-approve-process
        ref="processRef"
        class="approveProcess"
        v-bind="{ ...processConfig }"
        @collaborateSuccess="collaborateSuccess"
      />
    </div>
  </div>
</template>
<script setup>
import { apiMethods } from '@/utils/http.js';
import { ElMessage } from 'element-plus';
import myFileList from '@/components/text/FileList.vue';
const props = defineProps({
  formConfig: {
    type: Object,
    default: () => {},
  },
  processConfig: {
    type: Object,
    default: () => {},
  },
  noneAttachment: {
    type: Boolean,
    default: false,
  },
  noAction: {
    // 无论当前行为什么状态，审批页都是禁止操作的
    type: Boolean,
    default: false,
  },
  submitApi: {
    type: String,
    default: '',
  },
  submitParams: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits([
  'close',
  'formEvent',
  'buttonClick',
  'collaborateSuccess',
  'submitSuccess',
  'fileEvent',
]);

const visible = ref(false);

const formData = ref({});
const remarkValue = ref('');
const fileList = ref([]);
const loading = ref(false);
const disabled = ref(false);

// ref
const processRef = ref();

const init = row => {
  visible.value = true;
  formData.value = { ...row };
  // remarkValue.value = row.remark;
  processRef.value.init(row);
  // 判断页面可否操作
  if (props.noAction) {
    disabled.value = true;
  } else {
    row.status === '0' ? (disabled.value = false) : (disabled.value = true);
  }
  // 判断文件展示形式 多文件走接口，对话框展示。单文件直接展示
  getFileList();
};

const dialogButtonList = computed(() => {
  if (props?.buttonList?.length) {
    return props.buttonList;
  } else {
    return [
      { prop: 'return', label: 'Return', type: '', disabled: disabled.value },
      { prop: 'reject', label: 'Reject', type: '', disabled: disabled.value },
      {
        prop: 'confirm',
        label: 'Confirm',
        type: 'primary',
        disabled: disabled.value,
        loading: loading.value,
      },
    ];
  }
});

const pageAction = prop => {
  closePage();
};

const buttonClick = ({ prop }) => {
  emit('buttonClick', prop, {});
  let params = {
    ...props.submitParams,
    description: remarkValue.value || '',
    type: '',
    recid: formData.value.recid,
  };

  switch (prop) {
    case 'confirm':
      params.type = '1';
      break;
    case 'return':
      params.type = '2';
      break;
    case 'reject':
      params.type = '3';
      break;
    case 'recall':
      params.type = '4';
      break;
    default:
      break;
  }

  disabled.value = true;
  loading.value = true;
  apiMethods
    .post(props.submitApi, params)
    .then(res => {
      if (res.data.errorCode === '200' || res.data.code === '200') {
        ElMessage.success(res.data.msg);
        closePage();
        emit('submitSuccess');
      } else {
        ElMessage.error(res.data.msg);
      }
      disabled.value = false;
      loading.value = false;
    })
    .catch(error => {
      ElMessage.error('Internet Error');
      console.log(error);
    });
};

const formEvent = data => {
  emit('formEvent', data);
};

const getFileList = () => {
  if (false) {
    console.log('123');
  } else if (formData.value.attachmentUrl) {
    fileList.value = [
      {
        link: formData.value.attachmentUrl,
        name: formData.value.attachmentName,
        date: formData.value.attachmentDate,
      },
    ];
  } else {
    fileList.value = [];
  }
};

// 审批协同后通知主列表刷新
const collaborateSuccess = () => {
  closePage();
  emit('submitSuccess');
  emit('collaborateSuccess');
};

const closePage = () => {
  // 清除数据
  disabled.value = false;
  loading.value = false;
  formData.value = {};
  remarkValue.value = '';
  fileList.value = [];
  // 关闭页面
  visible.value = false;
  // 通知父组件
  emit('close');
};

const fileEvent = data => {
  emit('fileEvent', data);
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
.approvePageRoot {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f2;
  z-index: 3;
  top: 0;
  .approvePage {
    height: calc(100% - 40px);
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .approveForm {
      flex: 1;
      display: flex;
      gap: 10px;
      .approveFormItem {
        flex: 7;
        display: flex;
        flex-direction: column;
        .opFormStyle {
          flex: 1;
          display: flex;
          :deep(.el-row) {
            width: 100%;
          }
        }
      }
      .approveFormRemark {
        flex: 3;
        display: flex;
        flex-direction: column;
        .textarea {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 10px;
          .el-textarea {
            height: 100%;
            :deep(.el-textarea__inner) {
              height: 100% !important;
            }
          }
        }
        .op-button-list {
          justify-content: flex-end;
        }
      }
    }
    .approveProcess {
      // height: 40%;
    }
  }
}
@media only screen and (min-width: 1441px) {
  .const {
    max-width: 100%;
    flex: 0 0 100%;
  }
  .approvePageRoot .approvePage .approveForm {
    flex-wrap: wrap;
    .approveFormItem {
      @extend .const;
    }
    .approveFormRemark {
      @extend .const;
    }
  }
}
.noData {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  background: #f8fafb;
  color: #909399;
  font-size: 14px;
}
</style>
